<template>
	<view class="index-box" v-if="orderInfo.pk_id">
		<line-state :orderInfo="orderInfo"></line-state>
		<view class="box"><prod-list :orderInfo="orderInfo"></prod-list></view>
		<view class="box"><order-base :orderInfo="orderInfo"></order-base></view>
		<view class="box no_bg"><bottom-button :orderInfo="orderInfo"></bottom-button></view>
	</view>
</template>

<script>
	import ticketStateDetail from './components/ticket-state-detail.vue';
	import prodList from './components/prodList.vue';
	import orderBase from './components/order-base.vue';
	import bottomButton from './components/bottom-button.vue';
	import { getMoment } from '@/utils/moment';
	
	export default {
		components: {
			'line-state':ticketStateDetail,
			prodList,
			orderBase,
			bottomButton
		},
		data() {
			return {
				orderInfo: {
					pk_id: ''
				},
				init: false
			};
		},
		onLoad: function(options) {
			if (options.id) {
				this.initPage(Number(options.id));
			}
		},
		onShow() {
			if (this.init) {
				this.initPage();
			}else{
				this.init = true;
			}
		},
		methods: {
			// 初始化,子组件也会调用
			initPage(pk_id) {
				this.$loading();
				this.$resPost('GetOrderDetailedInfo', { pk_id: pk_id || this.orderInfo.pk_id })
					.then(({ data }) => {
						this.$hide();
						let nowTime = new Date().getTime();
						let time = getMoment(data.date_creation, 'YYYY/MM/DD HH:mm:ss');
						if (data.pay_status == '0' && nowTime - time >= 2 * 60 * 60 * 1000) {
							data.pay_status = '-1';
						}
						this.orderInfo = data;
					})
					.catch(() => this.$hide());
			}
		}
	};
</script>
<style lang="scss">
page {
	background-color: $www-theme-bg;
}
</style>
<style lang="scss" scoped>
.box {
	background-color: #ffffff;
	padding: 0 24rpx;
	margin-top: 20rpx;
	.box-title{
		margin-left: 75rpx;
	}
	&.no_bg{
		background: transparent;
	}
}
</style>